<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        .validate-wrap {
            width: 600px;
            margin: 50px auto;

            & .validate-box {
                width: 100%;
                position: relative;

                & img {
                    width: 600px;
                    height: 337px;
                }

                & .validate-a,
                & .validate-b {
                    width: 50px;
                    height: 50px;
                    background-color: red;
                    position: absolute;
                    top: 100px;
                }

                & .validate-a {
                    left: 0;
                    background-color: blanchedalmond;
                    z-index: 1;
                    background: url(../images/bg.png) no-repeat -300px -100px;

                    background-size: 600px auto;
                }

                & .validate-b {
                    left: 300px;
                }

            }

            & .validate-slide {
                width: 100%;
                height: 50px;
                margin-top: 10px;
                border-radius: 25px;
                background-color: grey;
                position: relative;

                & .validate-ball {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background-color: aquamarine;
                    position: absolute;
                    left: 0px;
                    top: 0;
                }
            }


        }
    </style>
</head>

<body>
    <div class="validate-wrap">
        <div class="validate-box">
            <img src="../images/bg.png" alt="">
            <div class="validate-a"></div>
            <div class="validate-b"></div>
        </div>
        <div class="validate-slide">
            <div class="validate-ball"></div>
        </div>
    </div>
</body>
<script>
    // window.onload = function () {
    var ball = document.getElementsByClassName("validate-ball")[0];
    var slide = document.getElementsByClassName("validate-slide")[0];
    var box = document.getElementsByClassName("validate-box")[0];
    var boxA = document.getElementsByClassName("validate-a")[0];
    var boxB = document.getElementsByClassName("validate-b")[0];


    // 随机位置时发现 maxTop的值出现问题   
    // 分析: maxTop由box.clientHeight - boxB.clientHeight得到  =>box.clientHeight存在问题 => box高度由图片撑开,而图片加载需要时间的, 如果页面加载时,图片还未载入到页面中,图片无法撑开box 

    // 解决方法:
    // (1)  给图片或box设置定高
    // (2)  等图片加载完毕,再执行代码  => window.onload

    var maxLeft = slide.clientWidth - ball.clientWidth;
    var maxTop = box.clientHeight - boxB.clientHeight;

    console.log(maxTop, box.clientHeight, boxB.clientHeight);

    randPos();

    ball.onmousedown = function (e) {
        e = e || window.event;

        var posX = e.offsetX;
        var posY = e.offsetY;

        document.onmousemove = function (e) {
            var x = e.pageX - slide.offsetLeft - posX;

            if (x < 0) x = 0;
            if (x > maxLeft) x = maxLeft;

            ball.style.left = x + "px";
            boxA.style.left = x + "px";

        }

        document.onmouseup = function () {
            document.onmousemove = null;

            // 松开时进行校验 => A B重合
            // A B重合:  A的left值和B的left值相同即可
            // 理想情况下:  boxA.offsetLeft == boxB.offsetLeft  对手残党不友好

            // 处理:设置误差允许范围 [boxB.offsetLeft-2,boxB.offsetLeft+2]
            // (1) boxA.offsetLeft >= boxB.offsetLeft-2 && boxA.offsetLeft <= boxB.offsetLeft +2
            // (2) Math.abs(boxA.offsetLeft - boxB.offsetLeft) <= 2


            if (ball.offsetLeft > 0) {
                if (Math.abs(boxA.offsetLeft - boxB.offsetLeft) <= 2) {
                    console.log("校验成功:解锁");
                    // ball.onmousedown =  null;

                    // location   地址栏对象
                    location.href = "https://www.jd.com";  // 修改地址栏中的地址 => 跳转到该地址

                } else {
                    ball.style.left = 0 + "px";
                    boxA.style.left = 0 + "px";

                    randPos();
                }
            }
        }
    }

    function randPos() {
        var randX = 200 + Math.round(Math.random() * (maxLeft - 200));
        var randY = Math.round(Math.random() * maxTop);

        boxB.style.left = randX + "px";
        boxB.style.top = randY + "px";
        boxA.style.top = randY + "px";

        // boxA.style.backgroundPosition = `-${randX}px -${randY}px`;
        boxA.style.backgroundPositionX = (-randX) + "px";
        boxA.style.backgroundPositionY = (-randY) + "px";

    }


    // }
</script>

</html>